import React, { useState } from 'react';
import {
    View, Text, TouchableOpacity, TextInput, ScrollView,
} from 'react-native';
import PropTypes from 'prop-types';
import AntDesign from 'react-native-vector-icons/AntDesign';
import moment from 'moment';
import { WhiteSpace, Modal, Toast } from '@ant-design/react-native';
import FilePickerManager from 'react-native-file-picker';
import styles from './styles';
import { changePlanState, updateEndTime, saveReport } from '../../../../comconfig/sqlfun';

const Item = ({ objItem, getPlanList }) => {
    const [show, setShow] = useState(false);
    const planId = parseInt(objItem.planid, 10);
    const [value, onChangeTextVal] = useState('');
    const [fileUrls, setFileUrl] = useState([]);
    const pickFile = () => {
        FilePickerManager.showFilePicker(null, (response) => {
            if (response.didCancel) {
                Toast.info('已取消', 1, undefined, false);
            } else if (response.error) {
                Toast.info(response.error, 1, undefined, false);
            } else {
                setFileUrl([...fileUrls, { fileName: response.fileName, path: response.path }]);
            }
        });
    };
    return (
        <View style={styles.card}>
            <TouchableOpacity
                onPress={() => setShow(true)
                }
            >
                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                    <Text style={styles.titel}>{objItem.title}</Text>
                </View>
                <WhiteSpace />
                <View style={styles.card_context}>
                    <View style={styles.date}>
                        <AntDesign
                            name="calendar"
                            size={25}
                            color="#017BFF"
                            style={{ marginRight: 5 }}
                        />
                        <Text style={styles.context}>
                            {moment(objItem.startTime).format('YY-MM-DD')}
                        </Text>
                        <Text style={{ color: '#017BFF', fontSize: 18 }}> ~ </Text>
                        <Text style={styles.context}>
                            {moment(objItem.planTime).format('YY-MM-DD')}
                        </Text>
                    </View>
                </View>
                <WhiteSpace />
                <View style={styles.card_context}>
                    <AntDesign
                        name="clockcircleo"
                        size={25}
                        color="#017BFF"
                        style={{ marginRight: 5 }}
                    />
                    <View style={styles.date}>
                        <Text style={{ fontSize: 18, color: '#017BFF' }}>
                            共进行
                        </Text>
                        <Text style={styles.context}>
                            {objItem.actuallyWorkTime}
                            小时
                        </Text>
                    </View>
                </View>
            </TouchableOpacity>
            <Modal
                title="添加验收报告并完成"
                transparent
                onClose={() => { setShow(false); }}
                maskClosable
                visible={show}
                footer={[
                    {
                        text: '取消',
                        onPress: () => {
                            setShow(false);
                        },

                    },
                    {
                        text: '确定',
                        onPress: () => {
                            const endTime = new Date().toString();
                            changePlanState(planId, 4);
                            updateEndTime(planId, moment(endTime).format('YYYY-MM-DD'));
                            saveReport(planId, objItem.title, value, fileUrls, endTime);
                            getPlanList();
                        },
                    },
                ]}
            >
                <View style={styles.modal}>
                    <ScrollView>
                        <TextInput
                            multiline
                            placeholder="报告内容"
                            placeholderTextColor="#5d5d7e"
                            style={styles.reportInput}
                            maxLength={200}
                            onChangeText={text => onChangeTextVal(text)}
                            value={value}
                            returnKeyLabel="done"
                        />
                        <TouchableOpacity
                            onPress={() => { pickFile(); }}
                        >
                            <Text style={{ color: '#017BFF' }}> 添加附件</Text>
                        </TouchableOpacity>
                        {
                            fileUrls.map((objFile, i) => (
                                <TouchableOpacity
                                    onLongPress={() => {
                                        const copyFiles = [...fileUrls];
                                        copyFiles.splice(i, 1);
                                        setFileUrl(copyFiles);
                                    }}
                                    key={Math.random(0, 1)}
                                >
                                    <Text
                                        numberOfLines={1}
                                        ellipsizeMode="middle"
                                    >
                                        {objFile.fileName}
                                    </Text>
                                </TouchableOpacity>
                            ))
                        }
                    </ScrollView>
                </View>
            </Modal>
        </View>
    );
};
Item.defaultProps = {
    objItem: {},
    getPlanList: () => {},
};
Item.propTypes = {
    objItem: PropTypes.objectOf(PropTypes.any),
    getPlanList: PropTypes.func,
};
export default Item;
